let Vue = null
class VueRouter{
  // static install = function(_Vue){
  //   console.log(_Vue)
  //   Vue = _Vue;
  // }
  constructor(options){
    let {routes} = options;
    this.routeMap = {};// {/home:Home}
    routes.forEach(item=>{
      this.routeMap[item.path] = item.component
    })
    window.addEventListener('load',()=>{
      location.hash = location.hash || '/'
      this._route = location.hash.slice(1);
    })
    this._route = location.hash.slice(1);
    console.log(Vue.util.defineReactive)
    Vue.util.defineReactive(this,'_route','/')
    // VUE自带的一个数据劫持的方法 只要_route 发生改变， 所有用到这个属性的地方都会自动更新
    window.addEventListener('hashchange',()=>{
      // 只要页面的hash发生改变 就会出发这个函数
      // location.hash = location.hash || '/'
      this._route = location.hash.slice(1);
    })

  }
}
VueRouter.install = function(_Vue){
  console.log(_Vue)
  Vue = _Vue;
  Vue.mixin({
    beforeCreate() {
      if(this.$options.router){
        this.$router = this.$options.router
      }else if(this.$parent){
        this.$router = this.$parent.$router
      }
    },
  })
  Vue.component('router-link',{
    props:{
      to:{
        type:[String,Object],
        required:true
      },
      tag:{
        type:String,
        default:'a'
      }
    },
    render(h){
      return h(this.tag,{
        attrs:{
          href:"#" + this.to
        }
      },this.$slots.default)
    }
  })
  Vue.component('router-view',{
    render(h){
      console.log('router-view',this.$router.routeMap)
      return h(this.$router.routeMap[this.$router._route])
    }
  })
}

export default VueRouter